<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商城管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑抢购</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="form" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="是否启用">
								<el-switch :active-value="0" :inactive-value="1" v-model="form.model.status"></el-switch>
							</el-form-item>
							<el-form-item prop="actDateRange" label="活动起始时间">
								<el-date-picker style="width:auto;" v-model="form.actDateRange"
									type="datetimerange"
									value-format="yyyy-MM-dd HH:mm:ss"
									start-placeholder="开始时间"
									end-placeholder="结束时间">
								</el-date-picker>
							</el-form-item>
							<el-form-item prop="payDateRange" label="尾款起始时间">
								<el-date-picker style="width:auto;" v-model="form.payDateRange"
									type="datetimerange"
									value-format="yyyy-MM-dd HH:mm:ss"
									start-placeholder="开始时间"
									end-placeholder="结束时间">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="关联商品">
								<dt-product-select v-model="form.model.productId" :data="form.model.goodsProduct"></dt-product-select>
							</el-form-item>
							<el-form-item prop="model.totalPrice" label="预售价格">
								<el-input v-model="form.model.totalPrice" placeholder="必填，商品预售的总价格">
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="model.frontAmount" label="预付定金">
								<el-input v-model="form.model.frontAmount" placeholder="必填，商品的预付金额">
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="model.retainAmount" label="尾款金额">
								<el-input v-model="form.model.retainAmount" placeholder="必填，商品的尾款金额">
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="model.deliveryDay" label="发货时间">
								<el-input type="number" v-model="form.model.deliveryDay" placeholder="必填,付完尾款后发货时间">
									<template slot="append">
										天
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="model.limitQuantity" label="限购数量">
								<el-input type="number" v-model="form.model.limitQuantity" placeholder="每人购买限购的数量">
									<template slot="append">
										件
									</template>
								</el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="活动介绍" name="details">
						<div class="tab-content">
							<el-form-item prop="model.title" label="活动标题">
								<el-input v-model="form.model.title" placeholder="可空，512字符内"></el-input>
							</el-form-item>
							<el-form-item label="活动介绍">
								<el-input type="textarea" :rows="3" v-model="form.model.remark" maxlength="512" show-word-limit placeholder="可空，限512字符内"></el-input>
							</el-form-item>
							<el-form-item prop="model.sortId" label="排序数字">
								<el-input type="number" v-model="form.model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item label="创建时间" v-if="form.model.id>0">
								{{form.model.addBy}} {{form.model.addTime}}
							</el-form-item>
							<el-form-item label="最后更新" v-if="form.model.id>0&&form.model.updateTime">
								{{form.model.updateBy}} {{form.model.updateTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtProductSelect from '../../../components/DtProductSelect.vue'
	
	export default {
		components: {
			DtProductSelect
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				form: {
					actDateRange: [],
					payDateRange: [],
					model: {
						id: 0,
						merchantId: 0,
						productId: 0,
						actStartTime: null,
						actEndTime: null,
						payStartTime: null,
						payEndTime: null,
						totalPrice: null,
						frontAmount: null,
						retainAmount: null,
						limitQuantity: null,
						deliveryDay: null,
						title: null,
						remark: null,
						status: 0,
						sortId: 99,
						addBy: null,
						addTime: null,
						updateBy: null,
						updateTime: null,
						goodsProduct: null
					}
				},
				rules: {
					actDateRange: [
						{ required: true, message: '请选择预售活动起始时间', trigger: 'change' }
					],
					payDateRange: [
						{ required: true, message: '请选择支付尾款起始时间', trigger: 'change' }
					],
					model: {
						title: [
							{ required: true, message: '请输入限时抢购名称', trigger: 'blur' }
						],
						totalPrice: [
							{ required: true, message: '请输入商品预售总价格', trigger: 'blur' },
							{ pattern: /^(([1-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
						],
						frontAmount: [
							{ required: true, message: '请输入预付款金额', trigger: 'blur' },
							{ pattern: /^(([1-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
						],
						retainAmount: [
							{ required: true, message: '请输入尾款金额', trigger: 'blur' },
							{ pattern: /^(([1-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
						],
						limitQuantity: [
							{ required: true, message: '请输入限购数量', trigger: 'blur' },
							{ pattern: /^-?[1-9]\d*$/, message: '限购数量只能为整数', trigger: 'blur' }
						],
						deliveryDay: [
							{ required: true, message: '请输入尾款结束后发货天数', trigger: 'blur' },
							{ pattern: /^-?[1-9]\d*$/, message: '发货天数只能为整数', trigger: 'blur' }
						],
						sortId: [
							{ required: true, message: '请输入排序数字', trigger: 'blur' },
							{ pattern: /^-?[1-9]\d*$/, message: '排序数字只能为整数', trigger: 'blur' }
						],
					},
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/merchant/shop/presell/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.form.model).forEach(key => { _this.form.model[key] = res.data[key] });
							_this.form.actDateRange = [_this.form.model.actStartTime, _this.form.model.actEndTime];
							_this.form.payDateRange = [_this.form.model.payStartTime, _this.form.model.payEndTime];
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//检查及组合参数
					if (_this.form.model.productId == 0) {
						_this.$message({ type: 'warning', message: '错误提示：请选择关联的商品' });
						return false;
					}
					if(!_this.form.actDateRange.length) {
						_this.$message({ type: 'warning', message: '错误提示：请选择预付款起始时间' });
						return false;
					}
					if(!_this.form.payDateRange.length) {
						_this.$message({ type: 'warning', message: '错误提示：请选择支付尾款起始时间' });
						return false;
					}
					//起始时间赋值
					_this.form.model.actStartTime = _this.form.actDateRange[0];
					_this.form.model.actEndTime = _this.form.actDateRange[1];
					_this.form.model.payStartTime = _this.form.payDateRange[0];
					_this.form.model.payEndTime = _this.form.payDateRange[1];
					//提交表单,Id大于0则修改，否则添加
					if (_this.form.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/merchant/shop/presell/' + _this.form.model.id,
							data: _this.form.model,
							successMsg: '商品预售修改成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//跳转列表页
								_this.$common.linkUrl('/shop/presell/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/merchant/shop/presell',
							data: _this.form.model,
							successMsg: '商品预售新增成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>